@import url(./lib/normalize-css/normalize.css);
@import url(./lib/bootstrap/dist/css/bootstrap.css);
@import url(./lib/font-awesome/css/font-awesome.css);
/**
 * Base
 * 
 * As the name suggest, base is the core.
 * Initialize variable and resets should be found in this directory.
 *
 * Style guide base
 */
/**
 * Reset.
 *
 * Additional reset styles.
 *
 * Style guide base.reset
 */
* {
  box-sizing: border-box; }

body {
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  width: 100%; }

.form-label {
  margin-bottom: 0; }

/**
 * Breakpoints.
 * 
 * Set of variables to make media query easy.
 *
 * Available breakpoints are:
 *  - ``$bkpt-s`` : 20em (320px, given font size of 16px)
 *  - ``$bkpt-m`` : 50em (800px, given font size of 16px)
 *  - ``$bkpt-l`` : 90em (1440px, given font size of 16px)
 * Use it like an usual media-query.
 *
 * Examples:
 *  @media screen and (max-width: $bkpt-m) {}
 *  @media screen and (max-width: $bkpt-l) {}
 *  @media screen and (min-width: $bkp-s) and (max-width: $bkpt-m) {}
 *
 * Markup: breakpoints.hbs
 *
 * Style guide: base.breakpoints
 */
/**
 * Colors.
 *
 * Set of color variables that compose the application.
 *
 * Markup: colors.hbs
 * 
 * Style guide base.colors
 */
/**
 * Visibility.
 *
 * Show/hide an element
 *
 * Style guide base.visibility
 */
/**
 * Show.
 *
 * Render an element visible.
 *
 * Style guide base.visibility.show
 */
.show, .fold-form--unfolded {
  visibility: visible;
  opacity: 1;
  width: auto; }

/**
 * Hide.
 *
 * Render an element hidden.
 *
 * Style guide base.visibility.hide
 */
.hide, .fold-form--folded {
  visibility: hidden;
  opacity: 1;
  width: 0; }

/**
 * Components
 *
 * Components are partials of the page.
 *
 * Style guide components
 */
/**
 * Debug.
 *
 * Debug component
 *
 * Markup: debug.hbs
 *
 * Style guide components.debug
 */
.debug, .bkpt {
  border: 1px solid red; }

/**
 * Fold components.
 *
 * Fold/unfold action.
 *
 * Markup: fold.hbs
 *
 * Style guide components.fold
 */
.fold-form--folded {
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s; }

.fold-form--unfolded {
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s; }

.fold-content--folded {
  outline: none;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
  width: 5rem; }

.fold-content--unfolded {
  outline: none;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
  width: 25rem;
  text-decoration: none; }

/**
 * Form.
 *
 * Define form component.
 *
 * Style guide components.form
 */
.form {
  /**
     * Form label.
     *
     * Default label style.
     *
     * Markup: form_label.hbs
     *
     * Style guide components.form.label
     */
  /**
     * Form input.
     *
     * Default input style.
     *
     * Markup: form_input.hbs
     *
     * Style guide components.form.input
     */
  /**
     * Form submit.
     *
     * Default submit button style.
     * 
     * Markup: form_submit.hbs
     *
     * Style guide components.form.submit
     */
  /**
     * Form error.
     *
     * Default error form style.
     *
     * Markup: form_error.hbs
     *
     * Style guide components.form.error
     */ }
  .form-label {
    height: 4.7rem;
    line-height: 5rem;
    width: 5rem;
    text-align: center; }
  .form-input {
    height: 5vh; }
  .form-submit {
    height: 5vh; }
  .form-error {
    line-height: 3rem; }

/**
 * Icon component.
 * 
 * Style guide components.icon
 */
.icon {
  /**
     * Default icon.
     *
     * Default icon style.
     *
     * Markup: icon_default.hbs
     *
     * Style guide components.icon.default
     */
  /**
     * Add icon.
     *
     * Icon rotate to be a cancel icon.
     *
     * Markup: icon_add.hbs
     *
     * Style guide components.icon.add
     */ }
  .icon-default {
    width: 1rem;
    height: 100%;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear; }
  .icon-add {
    width: 1rem;
    height: 100%;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
    -webkit-transform: scale(1) rotate(225deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
            transform: scale(1) rotate(225deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); }

/**
 * Regions
 *
 * Regions are modules of the page.
 *
 * Style guide regions
 */
/**
 * App.
 *
 * Defines the main app region
 *
 * Markup: app.hbs
 *
 * Style guide regions.app
 */
.app {
  width: 100%;
  max-width: 120em;
  height: 90%; }

/**
 * Chat
 *
 * Defines the chat region
 *
 * Markup: chat.hbs
 *
 * Style guide regions.chat
 */
.chat {
  float: left;
  width: 39%;
  height: 100%; }
  @media screen and (max-width: 90em) {
    .chat {
      width: 100%; } }
  .chat-iframe {
    width: 100%;
    height: 99%; }

/**
 * Content
 *
 * Defines the content region
 *
 * Markup: content.hbs
 *
 * Style guide regions.content
 */
.content {
  margin: 0px auto;
  height: 80%; }

/**
 * Header.
 *
 * Defines the header region
 *
 * Markup: header.hbs
 *
 * Style guide regions.header
 */
.header {
  height: 10rem;
  width: 100%; }

/**
 * Tab
 *
 * Tab region
 *
 * Style guide regions.tab
 */
.tab {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 10rem;
  width: 100%;
  /**
     * Tab list
     *
     * Markup: tab_list.hbs
     *
     * Style guide regions.tab.list
     */
  /**
     * Tab form.
     *
     * Form to manage tabs.
     *
     * Markup: tab_form.hbs
     *
     * Style guide regions.tab.form
     */ }
  .tab-list {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 10vh;
    width: 70%; }
    @media screen and (max-width: 50em) {
      .tab-list {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 0;
        width: 100%; } }
  .tab-item {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: 1em;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    list-style-type: none;
    text-transform: capitalize; }
    @media screen and (max-width: 50em) {
      .tab-item {
        width: 100%; } }
    .tab-item--link {
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      height: 5vh;
      text-align: center;
      width: 10rem; }
      @media screen and (max-width: 50em) {
        .tab-item--link {
          text-align: center;
          width: 100%; } }
    .tab-item--add {
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      height: 5vh;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      min-width: 5rem; }
  .tab-form {
    /**
         * Form tab label.
         *
         * Style guide regions.tab.form.label
         */
    /**
         * Form tab input.
         *
         * Style guide regions.tab.form.input
         */ }
    .tab-form--label {
      position: absolute;
      width: 5rem; }
    .tab-form--input {
      margin-left: 5rem; }

/**
 * Video
 *
 * Defines the video region
 *
 * Markup: video.hbs
 *
 * Style guide regions.video
 */
.video {
  float: left;
  width: 60%;
  height: 100%; }
  @media screen and (max-width: 90em) {
    .video {
      width: 100%; } }
  .video-iframe {
    width: 100%;
    height: 100%; }

/**
 * Dependencies
 *
 * Dependencies are modules of the page.
 *
 * Style guide dependencies
 */
/**
 * Theme.
 *
 * Compose the theme by adding colors.
 *
 *
 * Style guide dependencies.theme
 */
body {
  background-color: #080808;
  color: #fefefe; }

/**
 * Form theme
 *
 * Style guide dependencies.theme.form
 */
.form {
  /**
     * Form label theme
     *
     * Markup: theme_form_label.hbs
     *
     * Style guide dependencies.theme.form.label
     */
  /**
     * Form input theme
     *
     * Markup: theme_form_input.hbs
     *
     * Style guide dependencies.theme.form.input
     */
  /**
     * Form submit theme
     *
     * Markup: theme_form_submit.hbs
     *
     * Style guide dependencies.theme.form.submit
     */
  /**
     * Form error theme
     *
     * Markup: theme_form_error.hbs
     *
     * Style guide dependencies.theme.form.error
     */ }
  .form-label--tabname {
    background-color: #68a7e1;
    color: #fefefe; }
  .form-label--twitch {
    background-color: #6441a5;
    color: #fefefe; }
  .form-label--kageshi {
    background-color: #b4e8ff;
    color: #080808; }
  .form-input--tabname:focus {
    border: 1px solid #68a7e1; }
  .form-input--twitch:focus {
    border: 1px solid #6441a5; }
  .form-input--kageshi:focus {
    border: 1px solid #b4e8ff; }
  .form-submit {
    background-color: #7f8f24;
    border: 1px solid #7f8f24;
    color: #fefefe; }
  .form-error {
    padding: 1em;
    background-color: #a54b42; }

/**
 * Link theme
 *
 * Style guide dependencies.theme.link
 */
.link {
  /**
     * Link to trigger fold
     *
     * Markup: theme_link_fold.hbs
     *
     * Style guide dependencies.theme.link.fold
     */
  /**
     * Link to trigger unfold
     *
     * Markup: theme_link_unfold.hbs
     *
     * Style guide dependencies.theme.link.unfold
     */ }
  .link-fold {
    background-color: #7f8f24 !important;
    text-decoration: none;
    color: #fefefe; }
  .link-unfold {
    background-color: #a54b42 !important;
    text-decoration: none;
    color: #fefefe; }

/**
 * Tab theme
 *
 * Style guide dependencies.theme.tab
 */
.tab {
  background-color: #121212;
  /**
     * Tab theme default link
     * 
     * Markup: theme_tab_link.hbs
     * 
     * Style guide dependencies.theme.tab.link
     */
  /**
     * Tab theme active link
     * 
     * Markup: theme_tab_active.hbs
     * 
     * Style guide dependencies.theme.tab.active
     */ }
  .tab-link {
    background-color: #343434;
    color: #ddd; }
    .tab-link:hover {
      background-color: #111;
      color: #ddd;
      text-decoration: none; }
  .tab-active {
    background-color: lightblue;
    color: #111; }
    .tab-active:hover {
      text-decoration: none;
      color: #111; }

/**********************
 * OLD CODE
 ***********************/
/* $bkpt-s: 20em; */
/* $bkpt-m: 50em; */
/* $bkpt-l: 90em; */
/* body { */
/*     color: #fefefe; */
/*     background-color: #080808; */
/*     box-sizing: border-box; */
/*     margin: 0 auto; */
/*     width: 100%; */
/*     height: 100%; */
/* } */
/* .header { */
/*     width: 100%; */
/*     height: 10vh; */
/* } */
/* #app { */
/*     height: 90vh; */
/* } */
/* .form { */
/*     &-label { */
/*         position: absolute; */
/*         height: 4.7rem; */
/*         margin-bottom: 0; */
/*         line-height: 5rem; */
/*         width: 5rem; */
/*         &--tabname { */
/*             background-color: #68a7e1; */
/*         } */
/*         &--twitch { */
/*             background-color: #6441a5; */
/*         } */
/*         &--kageshi { */
/*             color: #111; */
/*             background-color: #b4e8ff; */
/*         } */
/*     } */
/*     &-input { */
/*         border: 1px solid #fff; */
/*         color: #1a1a1a; */
/*         height: 5vh; */
/*         margin-left: 5rem; */
/*         &--tabname { */
/*             &:focus { */
/*                 border: 1px solid #68a7e1; */
/*             } */
/*         } */
/*         &--twitch { */
/*             &:focus { */
/*                 border: 1px solid #6441a5; */
/*             } */
/*         } */
/*         &--kageshi { */
/*             &:focus { */
/*                 border: 1px solid #b4e8ff; */
/*             } */
/*         } */
/*     } */
/*     &-submit { */
/*         border: 1px solid #7f8f24; */
/*         color: #efefef; */
/*         background-color: #7f8f24; */
/*         height: 5vh; */
/*     } */
/*     &-error { */
/*         position: absolute; */
/*         margin-left: -22.5rem; */
/*         margin-top: 4.7rem; */
/*         width: 22.5rem; */
/*         background-color: red; */
/*         line-height: 3rem; */
/*     } */
/*     &-folded { */
/*         display: flex; */
/*         flex-direction: row; */
/*         visibility: hidden; */
/*         width: 0; */
/*         opacity: 0; */
/*         transition: all 0.4s ease-in; */
/*         transition-delay: 0.4s; */
/*     } */
/*     &-unfolded { */
/*         visibility: visible; */
/*         width: 15rem; */
/*         margin-left: 5rem; */
/*         opacity: 1; */
/*         display: flex; */
/*         flex-direction: row; */
/*         transition: all 0.4s ease-in; */
/*         transition-delay: 0.4s; */
/*         padding-left: 3rem; */
/*     } */
/* } */
/* .link { */
/*     &-fold { */
/*         background-color: #7f8f24 !important; */
/*         outline: none; */
/*         transition: all 0.4s linear; */
/*         transition-delay: 0.4s; */
/*         width: 5rem; */
/*     } */
/*     &-unfold { */
/*         background: #a54b42 !important; */
/*         outline: none; */
/*         transition: all 0.4s linear; */
/*         transition-delay: 0.4s; */
/*         width: 25rem; */
/*         text-decoration: none; */
/*     } */
/* } */
/* .trigger { */
/*     &-fold { */
/*         position: absolute; */
/*         width: 10rem; */
/*         height: 5rem; */
/*         margin-top: -3rem; */
/*         z-index: 999; */
/*     } */
/*     &-unfold { */
/*         position: absolute; */
/*         width: 7rem; */
/*         height: 5rem; */
/*         margin-left: 12rem; */
/*         margin-top: -3rem; */
/*         z-index: 2; */
/*     } */
/* } */
/* .icon { */
/*     &-default { */
/*         align-items: center; */
/*         justify-content: center; */
/*         display: flex; */
/*         width: 100%; */
/*         height: 100%; */
/*         transition: all 0.4s linear; */
/*     } */
/*     &-add { */
/*         align-items: center; */
/*         justify-content: center; */
/*         margin-left: 13rem; */
/*         display: flex; */
/*         width: 100%; */
/*         height: 100%; */
/*         transition: all 0.8s linear; */
/*         transform: rotate(225deg); */
/*     } */
/* } */
/* .tab { */
/*     width: 100%; */
/*     height: 10vh; */
/*     background-color: #121212; */
/*     &-list { */
/*         align-items: stretch; */
/*         width: 70%; */
/*         height: 10vh; */
/*         display: flex; */
/*         @media screen and (max-width: $bkpt-m) { */
/*             flex-direction: column; */
/*             padding: 0; */
/*             width: 100%; */
/*         } */
/*     } */
/*     &-item { */
/*         align-items: center; */
/*         justify-content: center; */
/*         display:flex; */
/*         height: 100%; */
/*         font-size: 1em; */
/*         list-style-type: none; */
/*         text-transform: capitalize; */
/*         @media screen and (max-width: $bkpt-m) { */
/*             width: 100%; */
/*         } */
/*         &--link { */
/*             display: flex; */
/*             align-items: center; */
/*             height: 5vh; */
/*             width: 10rem; */
/*             justify-content: center; */
/*             text-align: center; */
/*             background: #343434; */
/*             color: #ddd; */
/*             text-decoration: none; */
/*             @media screen and (max-width: $bkpt-m) { */
/*                 text-align: center; */
/*                 width: 100%; */
/*             } */
/*             &:hover { */
/*                 background: #111; */
/*                 color: #ddd; */
/*                 text-decoration: none; */
/*             } */
/*         } */
/*         &--add { */
/*             align-items: center; */
/*             height: 5vh; */
/*             min-width: 5rem; */
/*         } */
/*     } */
/* } */
/* .active { */
/*     background-color: lightblue; */
/*     color: #111; */
/* } */
/* .content { */
/*     margin: 0px auto; */
/*     height: 80vh; */
/* } */
/* .video { */
/*     float: left; */
/*     width: 60%; */
/*     height: 100%; */
/*     @media screen and (max-width: $bkpt-l) { */
/*         width: 100%; */
/*     } */
/*     &-iframe { */
/*         width: 100%; */
/*         height: 100%; */
/*     } */
/* } */
/* .chat { */
/*     float: left; */
/*     width: 39%; */
/*     height: 100%; */
/*     @media screen and (max-width: $bkpt-l) { */
/*         width: 100%; */
/*     } */
/*     &-iframe { */
/*         width: 100%; */
/*         height: 99%; */
/*     } */
/* } */
/* .debug { */
/*     border: 1px solid red; */
/* } */
.empty, .bkpt {
  width: 5rem;
  height: 5rem; }
  .empty-m, .background, .color {
    width: 15rem; }

.kss-container {
  height: 10em; }

.kss-content:before, .bkpt:before {
  content: "lorem ipsum";
  color: #111; }

.debug, .bkpt {
  border: 1px solid red; }

.progress {
  background: #fefefe;
  width: 15rem;
  height: 2rem; }
  .progress-bar {
    width: 0;
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out; }
  .progress-start {
    bakground-color: #f36d0a;
    background: -webkit-linear-gradient(left, yellow, green);
    background: linear-gradient(to right, yellow, green);
    -webkit-transition: all 0.8s linear;
    transition: all 0.8s linear;
    height: 2rem;
    width: 15rem; }

.background-black, .background-tab--active, .color-white, .color-kageshi, .color-tab--item {
  background-color: #121212; }

.background-white {
  background-color: #fefefe; }

.bkpt-s {
  width: 20em; }
  .bkpt-s:before {
    content: "$bkpt-s"; }

.bkpt-m {
  width: 50em; }
  .bkpt-m:before {
    content: "$bkpt-m"; }

.bkpt-l {
  width: 90em; }
  .bkpt-l:before {
    content: "$bkpt-l"; }

.background-tab {
  color: #121212; }
  .background-tab--active {
    color: lightblue; }
  .background-tab--item {
    color: #343434; }

.color-white {
  color: #fefefe; }

.color-black {
  color: #080808; }

.color-tabname {
  color: #68a7e1; }

.color-twitch {
  color: #6441a5; }

.color-kageshi {
  color: #b4e8ff; }

.color-action--add {
  color: #7f8f24; }

.color-status--error {
  color: #a54b42; }

.color-status--active {
  color: #111; }

.color-tab--item {
  color: #ddd; }
